<template>
  <el-card class="box-card">
    <!-- <div slot="header" class="clearfix">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增工具</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="text item">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="index"
          align="center"
          :index="indexMethod"
          type="index"
          label="序号"
          width="70"
        >
        </el-table-column>
        <el-table-column prop="name" align="center" label="用户名称">
          <template slot-scope="scope">
            <span>{{
              scope.row.user[0] ? scope.row.user[0].nickname : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" align="center" label="反馈时间">
        </el-table-column>
        <!-- <el-table-column prop="status" align="center" label="反馈内容">
        </el-table-column> -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button
              v-if="scope.row.status == 1"
              type="danger"
              size="mini"
              @click="handleQiYong(scope.row)"
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.status != 1"
              type="primary"
              size="mini"
              @click="handleQiYong(scope.row)"
              >启用</el-button
            >
            <el-button
              v-if="scope.row.status == 2"
              type="danger"
              size="mini"
              @click="handleDel(scope.row)"
              >删除</el-button
            > -->
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 100, 200, 300]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :title="titleText"
    >
      <el-form :model="formLabelAlign" label-width="85px" ref="form">
        <div class="oneLine">
          {{ formLabelAlign.suggestion }}
        </div>

        <el-form-item label="反馈模块:" class="leftBox">
          <div>{{ formLabelAlign.module }}</div>
        </el-form-item>
        <el-form-item label="反馈类型:">
          <div>{{ formLabelAlign.types }}</div>
        </el-form-item>
        <!-- <el-form-item label="反馈内容:" class="leftBox">
          <span>{{ formLabelAlign.suggestion }}</span>
        </el-form-item> -->
        <el-form-item label="反馈图片:">
          <div>
            <el-image
              v-for="(item, index) in formLabelAlign.imgArray"
              :key="index"
              style="width: 100px; height: 100px"
              :src="imgHeader + item"
              fit="cover"
              :preview-src-list="[imgHeader + item]"
            >
            </el-image>
          </div>
        </el-form-item>
      </el-form>
      <div class="btnBox">
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">返回</el-button>
          <!-- <el-button type="primary" @click="save">确 认</el-button> -->
        </span>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { opinions, uploadFiles } from "../../../utils/api";
import {
  getFeedbackProblem,
  addGongJufL,
  editGongJufL,
  delGongJufL,
  QiYong,
} from "../../../utils/main";
export default {
  data() {
    return {
      // options: [
      //   {
      //     value: "1",
      //     label: "1",
      //   },
      //   {
      //     value: "2",
      //     label: "2",
      //   },
      // ],
      formLabelAlign: {
        name: "",
        tel: "",
        avatar: "",
      },
      fileLimit: 1,
      //   上传图片
      fileList: [],
      headers: { "Content-Type": "multipart/form-data" },
      loading: false,
      token: sessionStorage.getItem("token"),
      dialogVisible: false,
      // formInline: {
      //   mobile: "",
      //   name: "",
      // },
      Feedback: "",
      tableData: [],
      parameter: {
        common: "",
      },
      total: 0,
      limit: 10,
      page: 1,
      name: "",
      type: "2",
      status: "1",
      titleText: "",
      currentPage: 1,
      value: "",
      imgHeader: this.Global.imgHeader,

      // rules: {
      //   name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
      // },
    };
  },
  methods: {
    // 启用禁用接口
    // conditionUser(id, status) {
    //   QiYong(this.token, id, status)
    //     .then((res) => {
    //       if (res.data.status) {
    //         this.getList();
    //       } else {
    //         if (res.data.msg == "token失效,请重新进行登录") {
    //           this.$router.push("/login");
    //         }
    //         if (res.data.msg == "此账号没有权限") {
    //           this.$message.error(res.data.msg);
    //           this.loading = false;
    //         }
    //         let timer = setTimeout(() => {
    //           this.$message.error(res.data.msg);
    //         }, 5000);
    //       }
    //     })
    //     .catch((err) => {
    //       console.log(err.message);
    //     });
    // },
    // //启用禁用
    // handleQiYong(row) {
    //   if (row.status == 0) {
    //     let status = 2;
    //     this.conditionUser(row.id, status);
    //   }
    //   if (row.status == 1) {
    //     let status = 2;
    //     this.conditionUser(row.id, status);
    //   }
    //   if (row.status == 2) {
    //     let status = 1;
    //     this.conditionUser(row.id, status);
    //   }
    //   // this.getList();
    // },
    //查询
    onSubmit() {
      //   this.opinionsS();
      this.getList();
    },
    // 增加
    handleAdd() {
      this.formLabelAlign = {};
      this.dialogVisible = true;
      this.titleText = "新增工具分类";
    },
    // 编辑
    handleEdit(row) {
      this.formLabelAlign = row;
      this.formLabelAlign.imgArray = row.suggestion_img.split(",");
      this.dialogVisible = true;
      this.titleText = "反馈内容";
    },
    // save() {
    //   this.$refs["form"].validate((valid) => {
    //     if (valid) {
    //       // console.log(this.formLabelAlign, "8888880");
    //       if (this.formLabelAlign.id != null) {
    //         // console.log(this.formLabelAlign, "000");
    //         // 编辑
    //         editGongJufL(
    //           this.token,
    //           this.formLabelAlign.name,
    //           this.formLabelAlign.status,
    //           this.type,
    //           this.formLabelAlign.id
    //         ).then((res) => {
    //           if (res.data.status) {
    //             this.$message({
    //               message: "修改成功",
    //             });
    //             this.dialogVisible = false;
    //             this.getList();
    //           } else {
    //             this.$message.error(res.data.msg);
    //           }
    //         });
    //       } else {
    //         // console.log(this.formLabelAlign, "111");
    //         // 新增
    //         addGongJufL(
    //           this.token,
    //           this.formLabelAlign.name,
    //           this.status,
    //           this.type
    //         ).then((res) => {
    //           if (res.data.status) {
    //             this.$message({
    //               message: "新增成功",
    //             });
    //             this.total = res.data.data.count;
    //             this.formLabelAlign = {};
    //             this.dialogVisible = false;
    //             this.getList();
    //           } else {
    //             this.$message.error(res.data.msg);
    //           }
    //         });
    //       }
    //     } else {
    //       return false;
    //     }
    //   });
    // },
    // 删除
    // handleDel(row) {
    //   this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       // console.log(row.id);
    //       delGongJufL(this.token, row.id).then((res) => {
    //         if (res.data.status) {
    //           this.$message({
    //             type: "success",
    //             message: "删除成功",
    //           });
    //           this.getList();
    //         } else {
    //           this.$message.error(res.data.msg);
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    //序号
    indexMethod(index) {
      if (this.total < this.limit) {
        return this.total - index;
      } else {
        return this.total - (this.page - 1) * this.limit - index;
      }
    },
    //关闭
    handleClose() {
      this.dialogVisible = false;
    },
    //条数
    handleSizeChange(val) {
      this.limit = val;
      //   this.opinionsS();
      this.getList();
    },
    //页数
    handleCurrentChange(val) {
      this.page = val;
      //   this.opinionsS();
      this.getList();
    },
    // 新增
    // handleRemove() {},
    async getList() {
      this.loading = true;
      let res = await getFeedbackProblem(this.token, this.page, this.limit);
      if (res.data.status == true) {
        this.tableData = res.data.data.data || [];
        this.total = res.data.data.count;
        // console.log(this.total);
        // console.log(this.tableData, "55555");
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      } else {
        if (res.data.msg == "token失效,请重新进行登录") {
          this.$router.push("/login");
        }
        if (res.data.msg == "此账号没有权限") {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
        let timer = setTimeout(() => {
          this.$message.error(res.data.msg);
        }, 5000);
      }
    },
  },
  mounted() {
    // this.opinionsS();
    this.getList();
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
}

.divFlex {
  display: flex;
  align-items: center;
}
.oneLine {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgb(220, 220, 221);
  width: 90%;
  min-height: 100px;
}
.addP {
  font-size: 22px;
  text-align: center;
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.btnBox {
  display: flex;
  justify-content: center;
}
.el-image {
  margin-right: 10px;
}
.leftBox {
  margin-bottom: 5px;
}
</style>